export default class InputModal extends EventTarget {
  constructor(props) {
    super();

    const defaultProps = {
      width: 400,
      height: 200,
      title: 'Title',
      closable: true, // 是否显示右上角关闭按钮
      mask: true, // 是否展示遮罩
      visible: true, // 对话框是否可见
      inputLabel: 'Label Field',
      cancelText: '取消',
      okText: '确定',
      zIndex: 20,
      onCancel() {},
      onOk() {},
    };

    // 属性合并
    // this.props = Object.assign(defaultProps, props);
    this.props = { ...defaultProps, ...props };
    
    // 创建父元素并挂载
    this.modal_dom = document.createElement('div');
    this.init();
  }

  // 初始化
  init() {
    // 加载模板
    this.loadTemplate();
    // 监听自定义事件
    this.addEventListener('onOK', this.props.onOk);
    // 添加元素的事件
    this.addElementEvent();

    if(!this.props.mask) {
      // 去除遮罩
      this.modal_dom.querySelector('.modal-mask').style.display = 'none';
    }
    if(!this.props.visible) {
      // 删除modal的dom
      getDom(document, 'body', 'tag')[0].removeChild(this.modal_dom);
    }
  }

  // 加载模板
  loadTemplate() {
    // 获取浏览器宽高(给modal设置)
    const { width: mWidth, height: mHeight } = getBrowserWH(document) || {};

    this.modal_dom.className = 'modal'; // 为这个元素添加一个class
    this.modal_dom.style.width = mWidth; // 设置元素宽度
    this.modal_dom.style.height = mHeight; // 设置元素高度

    // 获取modal-content的大小
    const mcWidth = typeof this.props.width === 'number' ? this.props.width + 'px' : this.props.width;
    const mcHeight = typeof this.props.height === 'number' ? this.props.height + 'px' : this.props.height;
    const mcZIndex = this.props.zIndex;

    const innerHtml = `
      <div class="modal-mask"></div>
      <div class="modal-content" style="width: ${mcWidth};height: ${mcHeight};z-index:${mcZIndex};">
        <div class="modal-content-header">
          <div class="modal-content-header-title">${this.props.title}</div>
          ${this.props.closable ? `<div class="modal-content-header-close" id="modal-content-header-close">x</div>` : ''}
        </div>
        <div class="modal-content-body">
          <div class="modal-content-body-content">
            <div class="modal-content-body-content-label">${this.props.inputLabel}</div>
            <input class="modal-content-body-content-input" id="modal-content-body-content-input" />
          </div>
        </div>
        <div class="modal-content-tail">
          <div class="modal-content-tail-close" id="modal-content-tail-close">${this.props.cancelText}</div>
          <div class="modal-content-tail-sure" id="modal-content-tail-sure">${this.props.okText}</div>
        </div>
      </div>
    `;

    this.modal_dom.innerHTML = innerHtml;
    // 将modal挂载到body上
    getDom(document, 'body', 'tag')[0].appendChild(this.modal_dom);
  }

  // 添加元素事件
  addElementEvent() {
    if(this.props.visible) {
      if(this.props.closable) this.addDomListen('#modal-content-header-close', [() => this.props.onCancel(), () => this.close()]);
      this.addDomListen('#modal-content-tail-close', [() => this.props.onCancel(), () => this.close()]);
      this.addDomListen('#modal-content-tail-sure', [() => this.sure(), () => this.close()]);
    }
  }

  // 元素添加监听
  addDomListen(tag, fnArr) {
    // 获取元素
    const dom = this.modal_dom.querySelector(tag);
    // 添加点击事件
    dom.addEventListener('click', () => this.btnClickHandle(fnArr));
  }

  // 命名监听事件(方便移除)
  btnClickHandle(fnArr) {
    try {
      fnArr.forEach(fn => fn());
    } catch (error) {
      console.log(error);
    }
  }

  // 移除元素事件
  removeElementEvent() {
    if(this.props.closable) this.removeDomListen('#modal-content-header-close');
    this.removeDomListen('#modal-content-tail-close');
    this.removeDomListen('#modal-content-tail-sure');
  }

  // 元素移除监听
  removeDomListen(tag) {
    // 获取元素
    const dom = this.modal_dom.querySelector(tag);
    // 添加点击事件
    dom.removeEventListener('click', () => this.btnClickHandle());
  }

  // 关闭
  close() {
    try {
      // 移除监听事件
      this.removeElementEvent();
      // 删除modal的dom
      getDom(document, 'body', 'tag')[0].removeChild(this.modal_dom);
    } catch (error) {
      console.log(error);
    }
  }

  // 确认
  sure() {
    try {
      // 获取输入的值
      const inputValue = getDom(document, 'modal-content-body-content-input').value || null;
      // 自定义一个事件
      const onOK = new CustomEvent('onOK', { detail: inputValue });
      // 分发事件
      this.dispatchEvent(onOK);
    } catch (error) {
      console.log(error);
    }
  }
}